Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<fix> Changed tabIndex of second element to 1 - Advanced HTML and CSS / Keyboard Navigation #28657

Closed
wants to merge 1 commit into from
Closed

<fix> Changed tabIndex of second element to 1 - Advanced HTML and CSS / Keyboard Navigation #28657

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion advanced_html_css/accessibility/keyboard_navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
<div tabindex='0'>This is the first element listed in the HTML.</div>

<!-- This element is second in the tab order. -->
<div tabindex='0'>This is the second element listed in the HTML.</div>
<div tabindex='1'>This is the second element listed in the HTML.</div>
```

Sometimes you may find it necessary to either change the visual order of elements on a page using CSS (the `float` or `order` properties, for example), or the tab order of elements themselves using the `tabindex` attribute. Regardless of which method you may use, you should make sure the tab order matches the visual order of elements. If the tab order is different from the visual order, users could be left confused or frustrated trying to navigate the page with a keyboard, expecting one element to receive focus based on the visual layout and instead another element receives focus.
Expand All @@ -88,9 +88,9 @@

### Assignment

<div class="lesson-content__panel" markdown="1">

Check failure on line 91 in advanced_html_css/accessibility/keyboard_navigation.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

advanced_html_css/accessibility/keyboard_navigation.md:91 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 1, After: 0 }
] [Context: "<div class="lesson-content__panel" markdown="1">"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md
1. Watch [What is Focus?](https://www.youtube.com/watch?v=EFv9ubbZLKw&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=3) to see some issues that occur when trying to change the tab order, then watch [Controlling focus with tabindex](https://www.youtube.com/watch?v=Pe0Ce1WtnUM&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=4) to see how using the `tabindex` attribute can affect the tab order.
</div>

Check failure on line 93 in advanced_html_css/accessibility/keyboard_navigation.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

advanced_html_css/accessibility/keyboard_navigation.md:93 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 0, After: 1 }
] [Context: "</div>"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md

### Knowledge check

Expand All @@ -104,6 +104,6 @@

### Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

Check failure on line 107 in advanced_html_css/accessibility/keyboard_navigation.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Sections have default content 

advanced_html_css/accessibility/keyboard_navigation.md:107 TOP003/default-section-content Sections have default content [Expected: "This section contains helpful links to related content. It isn't required, so consider it supplemental."; Actual: "This section contains helpful links to related content. It isn’t required, so consider it supplemental.",] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP003.md

- [Skip Links](https://webaim.org/techniques/skipnav/) are another form of accessibility for keyboard users and can be especially helpful for those who require more effort to tab through the contents of a page.
Loading