diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs
index a4dd28242..9765a19c1 100644
--- a/crates/components/src/button.rs
+++ b/crates/components/src/button.rs
@@ -92,7 +92,7 @@ pub fn Button(
     let mut status = use_signal(ButtonStatus::default);
     let platform = use_platform();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     let ButtonTheme {
         background,
@@ -175,14 +175,14 @@ pub fn Button(
             onmouseenter,
             onmouseleave,
             onkeydown,
-            focus_id,
+            a11y_id,
             width: "{width}",
             height: "{height}",
             padding: "{padding}",
             margin: "{margin}",
-            focusable: "true",
+            a11y_focusable: "true",
             overflow: "clip",
-            role: "button",
+            a11y_role:"button",
             color: "{font_theme.color}",
             shadow: "{shadow}",
             border: "{border}",
diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs
index 26407cea7..12029fdfe 100644
--- a/crates/components/src/dropdown.rs
+++ b/crates/components/src/dropdown.rs
@@ -66,7 +66,7 @@ where
     let mut status = use_signal(DropdownItemStatus::default);
     let platform = use_platform();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
     let is_focused = focus.is_focused();
     let is_selected = *selected.read() == value;
 
@@ -115,8 +115,8 @@ where
         rect {
             width: "fill-min",
             color: "{color}",
-            focus_id,
-            role: "button",
+            a11y_id,
+            a11y_role:"button",
             background: "{background}",
             padding: "6 22 6 16",
             corner_radius: "6",
@@ -194,7 +194,7 @@ where
 
     let is_opened = *opened.read();
     let is_focused = focus.is_focused();
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     // Update the provided value if the passed value changes
     use_effect(use_reactive(&props.value, move |value| {
@@ -269,7 +269,7 @@ where
                 onclick,
                 onkeydown,
                 margin: "{margin}",
-                focus_id,
+                a11y_id,
                 background: "{button_background}",
                 color: "{font_theme.color}",
                 corner_radius: "8",
diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs
index a73fb4818..3be7bbc9a 100644
--- a/crates/components/src/input.rs
+++ b/crates/components/src/input.rs
@@ -165,7 +165,7 @@ pub fn Input(
         _ => {}
     };
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
     let cursor_reference = editable.cursor_attr();
     let highlights = editable.highlights_attr(0);
 
@@ -211,9 +211,9 @@ pub fn Input(
             corner_radius: "{corner_radius}",
             margin: "{margin}",
             cursor_reference,
-            focus_id,
-            focusable: "true",
-            role: "textInput",
+            a11y_id,
+            a11y_focusable: "true",
+            a11y_role:"textInput",
             main_align: "center",
             paragraph {
                 margin: "8 12",
diff --git a/crates/components/src/menu.rs b/crates/components/src/menu.rs
index 914a663ed..7d342b5d1 100644
--- a/crates/components/src/menu.rs
+++ b/crates/components/src/menu.rs
@@ -148,7 +148,7 @@ pub fn MenuItem(
     let mut status = use_signal(MenuItemStatus::default);
     let platform = use_platform();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
     let click = &onclick;
 
     let MenuItemTheme {
@@ -197,12 +197,12 @@ pub fn MenuItem(
             onclick,
             onmouseenter,
             onmouseleave,
-            focus_id,
+            a11y_id,
             width: "fill-min",
             padding: "6",
             margin: "2",
-            focusable: "true",
-            role: "button",
+            a11y_focusable: "true",
+            a11y_role:"button",
             color: "{font_theme.color}",
             corner_radius: "{corner_radius}",
             background: "{background}",
diff --git a/crates/components/src/network_image.rs b/crates/components/src/network_image.rs
index 4b39d6030..45d096d47 100644
--- a/crates/components/src/network_image.rs
+++ b/crates/components/src/network_image.rs
@@ -70,7 +70,7 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
     let mut cached_assets = use_signal::<Vec<AssetConfiguration>>(Vec::new);
     let mut assets_tasks = use_signal::<Vec<Task>>(Vec::new);
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
     let NetworkImageTheme { width, height } = use_applied_theme!(&props.theme, network_image);
     let alt = props.alt.as_deref();
 
@@ -121,10 +121,10 @@ pub fn NetworkImage(props: NetworkImageProps) -> Element {
         rsx!(image {
             height: "{height}",
             width: "{width}",
-            focus_id,
+            a11y_id,
             image_data,
-            role: "image",
-            alt
+            a11y_role: "image",
+            a11y_alt: alt
         })
     } else if *status.read() == ImageState::Loading {
         if let Some(loading_element) = &props.loading {
diff --git a/crates/components/src/scroll_views/scroll_bar.rs b/crates/components/src/scroll_views/scroll_bar.rs
index 870a6b5c5..80c0ba7da 100644
--- a/crates/components/src/scroll_views/scroll_bar.rs
+++ b/crates/components/src/scroll_views/scroll_bar.rs
@@ -56,7 +56,7 @@ pub fn ScrollBar(
     rsx!(
         rect {
             overflow: "clip",
-            role: "scrollBar",
+            a11y_role:"scrollBar",
             width: "{width}",
             height: "{height}",
             offset_x: "{offset_x}",
diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs
index 7b7e412d2..1982a6c05 100644
--- a/crates/components/src/scroll_views/scroll_view.rs
+++ b/crates/components/src/scroll_views/scroll_view.rs
@@ -363,11 +363,11 @@ pub fn ScrollView(
         .map(|f| f.0 == Axis::Y)
         .unwrap_or_default();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     rsx!(
         rect {
-            role: "scrollView",
+            a11y_role:"scrollView",
             overflow: "clip",
             direction: "horizontal",
             width,
@@ -376,7 +376,7 @@ pub fn ScrollView(
             onglobalmousemove: onmousemove,
             onkeydown,
             onkeyup,
-            focus_id,
+            a11y_id,
             rect {
                 direction: "vertical",
                 width: "{container_width}",
diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs
index 6ae3e4c83..a62144f7c 100644
--- a/crates/components/src/scroll_views/virtual_scroll_view.rs
+++ b/crates/components/src/scroll_views/virtual_scroll_view.rs
@@ -437,11 +437,11 @@ pub fn VirtualScrollView<
     let offset_y_min = (-corrected_scrolled_y / item_size).floor() * item_size;
     let offset_y = -corrected_scrolled_y - offset_y_min;
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     rsx!(
         rect {
-            role: "scrollView",
+            a11y_role:"scrollView",
             overflow: "clip",
             direction: "horizontal",
             width: "{width}",
@@ -450,7 +450,7 @@ pub fn VirtualScrollView<
             onglobalmousemove: onmousemove,
             onkeydown,
             onkeyup,
-            focus_id,
+            a11y_id,
             rect {
                 direction: "vertical",
                 width: "{container_width}",
diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs
index b291c2000..1e023a7ca 100644
--- a/crates/components/src/slider.rs
+++ b/crates/components/src/slider.rs
@@ -99,7 +99,7 @@ pub fn Slider(
     let (node_reference, size) = use_node();
 
     let value = ensure_correct_slider_range(value);
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     use_drop(move || {
         if *status.peek() == SliderStatus::Hovering {
@@ -176,7 +176,7 @@ pub fn Slider(
             height: "20",
             onmousedown,
             onglobalclick: onclick,
-            focus_id,
+            a11y_id,
             onmouseenter,
             onglobalmousemove: onmousemove,
             onmouseleave,
diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs
index 82b9d49e2..443e2688a 100644
--- a/crates/components/src/switch.rs
+++ b/crates/components/src/switch.rs
@@ -98,7 +98,7 @@ pub fn Switch(props: SwitchProps) -> Element {
     let mut status = use_signal(SwitchStatus::default);
     let mut focus = use_focus();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     use_drop(move || {
         if *status.read() == SwitchStatus::Hovering {
@@ -171,7 +171,7 @@ pub fn Switch(props: SwitchProps) -> Element {
             onmouseleave,
             onkeydown,
             onclick,
-            focus_id,
+            a11y_id,
             offset_x: "{offset_x}",
             main_align: "center",
             rect {
diff --git a/crates/components/src/tabs.rs b/crates/components/src/tabs.rs
index 5f3a8fae9..78c596388 100644
--- a/crates/components/src/tabs.rs
+++ b/crates/components/src/tabs.rs
@@ -84,7 +84,7 @@ pub fn Tab(children: Element, theme: Option<TabThemeWith>) -> Element {
     let platform = use_platform();
     let is_active = use_activable_route();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     let TabTheme {
         background,
@@ -127,12 +127,12 @@ pub fn Tab(children: Element, theme: Option<TabThemeWith>) -> Element {
         rect {
             onmouseenter,
             onmouseleave,
-            focus_id,
+            a11y_id,
             width: "{width}",
             height: "{height}",
-            focusable: "true",
+            a11y_focusable: "true",
             overflow: "clip",
-            role: "tab",
+            a11y_role:"tab",
             color: "{font_theme.color}",
             background: "{background}",
             text_align: "center",
@@ -203,7 +203,7 @@ pub fn BottomTab(children: Element, theme: Option<BottomTabThemeWith>) -> Elemen
     let platform = use_platform();
     let is_active = use_activable_route();
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     let BottomTabTheme {
         background,
@@ -239,12 +239,12 @@ pub fn BottomTab(children: Element, theme: Option<BottomTabThemeWith>) -> Elemen
         rect {
             onmouseenter,
             onmouseleave,
-            focus_id,
+            a11y_id,
             width: "{width}",
             height: "{height}",
-            focusable: "true",
+            a11y_focusable: "true",
             overflow: "clip",
-            role: "tab",
+            a11y_role:"tab",
             color: "{font_theme.color}",
             background: "{background}",
             text_align: "center",
diff --git a/crates/components/src/tile.rs b/crates/components/src/tile.rs
index 7a1a5ecb0..42ccc5252 100644
--- a/crates/components/src/tile.rs
+++ b/crates/components/src/tile.rs
@@ -43,7 +43,7 @@ pub fn Tile(
     let platform = use_platform();
     let TileTheme { padding } = use_applied_theme!(&theme, tile);
 
-    let focus_id = focus.attribute();
+    let a11y_id = focus.attribute();
 
     use_drop(move || {
         if *status.read() == TileStatus::Hovering {
@@ -73,7 +73,7 @@ pub fn Tile(
             onclick,
             onmouseenter,
             onmouseleave,
-            focus_id,
+            a11y_id,
             direction: "horizontal",
             onclick: move |_| {
                 if let Some(onclick) = &onclick {
diff --git a/crates/core/src/accessibility/mod.rs b/crates/core/src/accessibility/mod.rs
index fed12d403..52f3cc600 100644
--- a/crates/core/src/accessibility/mod.rs
+++ b/crates/core/src/accessibility/mod.rs
@@ -36,7 +36,7 @@ impl NodeAccessibility for DioxusNode<'_> {
             Some(ACCESSIBILITY_ROOT_ID)
         } else {
             let node_accessibility = &*self.get::<AccessibilityNodeState>()?;
-            node_accessibility.accessibility_id
+            node_accessibility.a11y_id
         }
     }
 
diff --git a/crates/core/src/accessibility/tree.rs b/crates/core/src/accessibility/tree.rs
index 4fe580f2d..293843642 100644
--- a/crates/core/src/accessibility/tree.rs
+++ b/crates/core/src/accessibility/tree.rs
@@ -325,7 +325,7 @@ impl AccessibilityTree {
         // Set focusable action
         // This will cause assistive technology to offer the user an option
         // to focus the current element if it supports it.
-        if node_accessibility.focusable {
+        if node_accessibility.a11y_focusable {
             builder.add_action(Action::Focus);
         }
 
@@ -429,7 +429,7 @@ impl AccessibilityTree {
         }
 
         // Set text value
-        if let Some(alt) = &node_accessibility.alt {
+        if let Some(alt) = &node_accessibility.a11y_alt {
             builder.set_value(alt.to_owned());
         } else if let Some(value) = node_ref.get_inner_texts() {
             builder.set_value(value);
@@ -437,12 +437,12 @@ impl AccessibilityTree {
         }
 
         // Set name
-        if let Some(name) = &node_accessibility.name {
+        if let Some(name) = &node_accessibility.a11y_name {
             builder.set_name(name.to_owned());
         }
 
         // Set role
-        if let Some(role) = node_accessibility.role {
+        if let Some(role) = node_accessibility.a11y_role {
             builder.set_role(role);
         }
         // Set root role
diff --git a/crates/elements/src/definitions.rs b/crates/elements/src/definitions.rs
index a7f43bfd7..98c153f0e 100644
--- a/crates/elements/src/definitions.rs
+++ b/crates/elements/src/definitions.rs
@@ -233,11 +233,11 @@ builder_constructors! {
         #[doc = include_str!("_docs/attributes/spacing.md")]
         spacing: String,
 
-        name: String,
-        focusable: String,
-        role: String,
-        focus_id: AccessibilityId,
-        alt: String,
+        a11y_name: String,
+        a11y_focusable: String,
+        a11y_role:String,
+        a11y_id: AccessibilityId,
+        a11y_alt: String,
         canvas_reference: String,
         layer: String,
         offset_y: String,
@@ -299,17 +299,17 @@ builder_constructors! {
         decoration_color: String,
         #[doc = include_str!("_docs/attributes/text_overflow.md")]
         text_overflow: String,
-        focusable: String,
         #[doc = include_str!("_docs/attributes/margin.md")]
         margin: String,
         #[doc = include_str!("_docs/attributes/opacity.md")]
         opacity: String,
 
         layer: String,
-        role: String,
-        alt: String,
-        focus_id: AccessibilityId,
-        name: String,
+        a11y_name: String,
+        a11y_focusable: String,
+        a11y_role:String,
+        a11y_id: AccessibilityId,
+        a11y_alt: String,
     };
     /// `paragraph` element let's you build texts with different styles.
     ///
@@ -372,7 +372,6 @@ builder_constructors! {
         text_overflow: String,
         #[doc = include_str!("_docs/attributes/overflow.md")]
         overflow: String,
-        focusable: String,
         #[doc = include_str!("_docs/attributes/margin.md")]
         margin: String,
         #[doc = include_str!("_docs/attributes/opacity.md")]
@@ -384,10 +383,11 @@ builder_constructors! {
         cursor_color: String,
         cursor_mode: String,
         cursor_id: String,
-        alt: String,
-        name: String,
-        role: String,
-        focus_id: AccessibilityId,
+        a11y_name: String,
+        a11y_focusable: String,
+        a11y_role:String,
+        a11y_id: AccessibilityId,
+        a11y_alt: String,
         highlights: String,
         highlight_color: String,
         highlight_mode: String,
@@ -454,11 +454,11 @@ builder_constructors! {
 
         image_data: String,
         image_reference: String,
-        role: String,
-        focus_id: AccessibilityId,
-        alt: String,
-        name: String,
-        focusable: String,
+        a11y_name: String,
+        a11y_focusable: String,
+        a11y_role:String,
+        a11y_id: AccessibilityId,
+        a11y_alt: String,
     };
     /// `svg` element let's you display SVG code.
     ///
@@ -493,11 +493,11 @@ builder_constructors! {
 
         svg_data: String,
         svg_content: String,
-        role: String,
-        focus_id: AccessibilityId,
-        alt: String,
-        name: String,
-        focusable: String,
+        a11y_name: String,
+        a11y_focusable: String,
+        a11y_role:String,
+        a11y_id: AccessibilityId,
+        a11y_alt: String,
     };
 }
 
diff --git a/crates/hooks/src/use_init_native_platform.rs b/crates/hooks/src/use_init_native_platform.rs
index 6f7217a75..a13a2339c 100644
--- a/crates/hooks/src/use_init_native_platform.rs
+++ b/crates/hooks/src/use_init_native_platform.rs
@@ -98,7 +98,7 @@ mod test {
             let mut focus_manager = use_focus();
 
             rsx!(rect {
-                focus_id: focus_manager.attribute(),
+                a11y_id: focus_manager.attribute(),
                 width: "100%",
                 height: "50%",
                 onclick: move |_| focus_manager.focus(),
@@ -153,7 +153,7 @@ mod test {
         #[allow(non_snake_case)]
         fn OtherChild() -> Element {
             rsx!(rect {
-                role: "genericContainer",
+                a11y_role: "genericContainer",
                 width: "100%",
                 height: "50%",
             })
diff --git a/crates/hooks/tests/use_focus.rs b/crates/hooks/tests/use_focus.rs
index cba11931f..923891957 100644
--- a/crates/hooks/tests/use_focus.rs
+++ b/crates/hooks/tests/use_focus.rs
@@ -9,13 +9,13 @@ pub async fn track_focus() {
     fn OtherChild() -> Element {
         let mut focus_manager = use_focus();
 
-        let focus_id = focus_manager.attribute();
+        let a11y_id = focus_manager.attribute();
 
         rsx!(
             rect {
                 width: "100%",
                 height: "50%",
-                focus_id,
+                a11y_id,
                 onclick: move |_| focus_manager.focus(),
                 label {
                     "{focus_manager.is_focused()}"
@@ -73,7 +73,7 @@ pub async fn block_focus() {
 
         rsx!(
             rect {
-                focus_id: focus_manager.attribute(),
+                a11y_id: focus_manager.attribute(),
                 width: "100%",
                 height: "50%",
                 onclick: move |_| focus_manager.focus(),
@@ -90,7 +90,7 @@ pub async fn block_focus() {
 
         rsx!(
             rect {
-                focus_id: focus_manager.attribute(),
+                a11y_id: focus_manager.attribute(),
                 width: "100%",
                 height: "50%",
                 onkeydown: move |_| {
diff --git a/crates/native-core/src/attributes.rs b/crates/native-core/src/attributes.rs
index d5ebb3083..8225e7966 100644
--- a/crates/native-core/src/attributes.rs
+++ b/crates/native-core/src/attributes.rs
@@ -44,11 +44,11 @@ pub enum AttributeName {
     PositionLeft,
     Opacity,
     Content,
-    Name,
-    Focusable,
-    Role,
-    FocusId,
-    Alt,
+    A11YName,
+    A11YFocusable,
+    A11YRole,
+    A11YId,
+    A11YAlt,
     CanvasReference,
     Layer,
     OffsetY,
@@ -116,11 +116,11 @@ impl FromStr for AttributeName {
             "position_left" => Ok(AttributeName::PositionLeft),
             "opacity" => Ok(AttributeName::Opacity),
             "content" => Ok(AttributeName::Content),
-            "name" => Ok(AttributeName::Name),
-            "focusable" => Ok(AttributeName::Focusable),
-            "role" => Ok(AttributeName::Role),
-            "focus_id" => Ok(AttributeName::FocusId),
-            "alt" => Ok(AttributeName::Alt),
+            "a11y_name" => Ok(AttributeName::A11YName),
+            "a11y_focusable" => Ok(AttributeName::A11YFocusable),
+            "a11y_role" => Ok(AttributeName::A11YRole),
+            "a11y_id" => Ok(AttributeName::A11YId),
+            "a11y_alt" => Ok(AttributeName::A11YAlt),
             "canvas_reference" => Ok(AttributeName::CanvasReference),
             "layer" => Ok(AttributeName::Layer),
             "offset_y" => Ok(AttributeName::OffsetY),
diff --git a/crates/state/src/accessibility.rs b/crates/state/src/accessibility.rs
index 99359f0db..272974e68 100644
--- a/crates/state/src/accessibility.rs
+++ b/crates/state/src/accessibility.rs
@@ -36,13 +36,13 @@ use crate::{
 #[derive(Clone, Debug, PartialEq, Eq, Default, Component)]
 pub struct AccessibilityNodeState {
     pub closest_accessibility_node_id: Option<NodeId>,
-    pub node_id: NodeId,
-    pub accessibility_id: Option<AccessibilityId>,
     pub descencent_accessibility_ids: Vec<AccessibilityId>,
-    pub role: Option<Role>,
-    pub alt: Option<String>,
-    pub name: Option<String>,
-    pub focusable: bool,
+    pub node_id: NodeId,
+    pub a11y_id: Option<AccessibilityId>,
+    pub a11y_role: Option<Role>,
+    pub a11y_alt: Option<String>,
+    pub a11y_name: Option<String>,
+    pub a11y_focusable: bool,
 }
 
 impl ParseAttribute for AccessibilityNodeState {
@@ -51,34 +51,34 @@ impl ParseAttribute for AccessibilityNodeState {
         attr: freya_native_core::prelude::OwnedAttributeView<CustomAttributeValues>,
     ) -> Result<(), crate::ParseError> {
         match attr.attribute {
-            AttributeName::FocusId => {
+            AttributeName::A11YId => {
                 if let OwnedAttributeValue::Custom(CustomAttributeValues::AccessibilityId(id)) =
                     attr.value
                 {
-                    self.accessibility_id = Some(*id);
+                    self.a11y_id = Some(*id);
                 }
             }
-            AttributeName::Role => {
+            AttributeName::A11YRole => {
                 if let OwnedAttributeValue::Text(attr) = attr.value {
-                    self.role = Some(
+                    self.a11y_role = Some(
                         serde_json::from_str::<Role>(&format!("\"{attr}\""))
                             .map_err(|_| ParseError)?,
                     )
                 }
             }
-            AttributeName::Alt => {
+            AttributeName::A11YAlt => {
                 if let OwnedAttributeValue::Text(attr) = attr.value {
-                    self.alt = Some(attr.to_owned())
+                    self.a11y_alt = Some(attr.to_owned())
                 }
             }
-            AttributeName::Name => {
+            AttributeName::A11YName => {
                 if let OwnedAttributeValue::Text(attr) = attr.value {
-                    self.name = Some(attr.to_owned())
+                    self.a11y_name = Some(attr.to_owned())
                 }
             }
-            AttributeName::Focusable => {
+            AttributeName::A11YFocusable => {
                 if let OwnedAttributeValue::Text(attr) = attr.value {
-                    self.focusable = attr.parse().unwrap_or_default()
+                    self.a11y_focusable = attr.parse().unwrap_or_default()
                 }
             }
             _ => {}
@@ -98,11 +98,11 @@ impl State<CustomAttributeValues> for AccessibilityNodeState {
 
     const NODE_MASK: NodeMaskBuilder<'static> =
         NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&[
-            AttributeName::FocusId,
-            AttributeName::Role,
-            AttributeName::Alt,
-            AttributeName::Name,
-            AttributeName::Focusable,
+            AttributeName::A11YId,
+            AttributeName::A11YRole,
+            AttributeName::A11YAlt,
+            AttributeName::A11YName,
+            AttributeName::A11YFocusable,
         ]));
 
     fn update<'a>(
@@ -130,7 +130,7 @@ impl State<CustomAttributeValues> for AccessibilityNodeState {
         }
 
         for (child,) in children {
-            if let Some(child_id) = child.accessibility_id {
+            if let Some(child_id) = child.a11y_id {
                 // Mark this child as descendent if it has an ID
                 accessibility.descencent_accessibility_ids.push(child_id)
             } else {
@@ -146,7 +146,7 @@ impl State<CustomAttributeValues> for AccessibilityNodeState {
             // fallback to its closest ID.
             accessibility.closest_accessibility_node_id = parent
                 .0
-                .accessibility_id
+                .a11y_id
                 .map(|_| parent.0.node_id)
                 .or(parent.0.closest_accessibility_node_id);
         }
@@ -157,16 +157,16 @@ impl State<CustomAttributeValues> for AccessibilityNodeState {
 
         if changed {
             // Assign an accessibility ID if none was passed but the node has a role
-            if self.accessibility_id.is_none() && self.role.is_some() {
+            if self.a11y_id.is_none() && self.a11y_role.is_some() {
                 let id = AccessibilityId(accessibility_generator.new_id());
                 #[cfg(debug_assertions)]
                 tracing::info!("Assigned {id:?} to {:?}", node_view.node_id());
 
-                self.accessibility_id = Some(id)
+                self.a11y_id = Some(id)
             }
 
             // Add or update this node if it is the Root or if it has an accessibility ID
-            if self.accessibility_id.is_some() || node_view.node_id() == *root_id {
+            if self.a11y_id.is_some() || node_view.node_id() == *root_id {
                 accessibility_dirty_nodes
                     .lock()
                     .unwrap()
diff --git a/examples/accessibility.rs b/examples/accessibility.rs
index 68c751304..56f07101c 100644
--- a/examples/accessibility.rs
+++ b/examples/accessibility.rs
@@ -23,7 +23,7 @@ fn app() -> Element {
 
     rsx!(
         rect {
-            focus_id: focus_a.attribute(),
+            a11y_id: focus_a.attribute(),
             background: "rgb(233, 196, 106)",
             padding: "25",
             width: "50%",
@@ -32,7 +32,7 @@ fn app() -> Element {
                 focus_a.focus();
             },
             label {
-                focus_id: focus_c.attribute(),
+                a11y_id: focus_c.attribute(),
                 onclick: move |e| {
                     e.stop_propagation();
                     focus_c.focus();
@@ -49,19 +49,19 @@ fn app() -> Element {
             }
         }
         rect {
-            focus_id: focus_b.attribute(),
+            a11y_id: focus_b.attribute(),
             background: "rgb(150, 100, 231)",
             padding: "25",
             width: "100%",
             height: "50%",
-            role: "label",
-            alt: "This is a rectangle",
+            a11y_role:"label",
+            a11y_alt: "This is a rectangle",
             onclick: move |_| {
                 focus_b.focus();
             },
             label {
-                role: "label",
-                focus_id: focus_d.attribute(),
+                a11y_role:"label",
+                a11y_id: focus_d.attribute(),
                 onclick: move |e| {
                     e.stop_propagation();
                     focus_d.focus();
diff --git a/examples/floating_editors.rs b/examples/floating_editors.rs
index 506f82188..b7f7841f9 100644
--- a/examples/floating_editors.rs
+++ b/examples/floating_editors.rs
@@ -192,12 +192,12 @@ fn Editor() -> Element {
         }
     };
 
-    let focus_id = focus_manager.attribute();
+    let a11y_id = focus_manager.attribute();
 
     rsx!(
         rect {
             onclick,
-            focus_id,
+            a11y_id,
             width: "fill",
             height: "fill",
             padding: "10",