cybercyst/go
1
0
Fork 0
mirror of https://github.com/golang/go.git synced 2025-05-05 15:43:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updated WebAccessibilityResourcesAndTips (markdown)

jimmyfrasche 2017-10-09 15:16:36 -07:00
parent 45334f7ddc
commit 742738ce08
1 changed files with 1 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
WebAccessibilityResourcesAndTips.md

@ -4,6 +4,7 @@ Accessibility is a large topic that ranges from the merely esoteric to the excru
There are, however, a number of simple rules of thumb to follow that greatly reduce the chances of creating an inaccessible page by accident:
- Prefer semantic markup. The native html elements have a great deal of accessibility baked in with no need to turn anything on or turn anything off. If you have a list of things use `ul` or `ol` even if you do not want it to be displayed as a list. The extra CSS is worth it.
- When using headers (`h1`-`h6`) never skip a level and make sure they nest logically so that, for example, an `h4` is a logical subsection of the previous `h3`. Screen readers use these as navigational landmarks, similar to a table of contents.
- Avoid layouts that work against the source order of the document. It's very easy to rearrange element with flexbox and grid but when you do the focus order remains unchanged. Someone navigating the site by keyboard will jump from place to place seemingly at random, making it very hard to follow what's going on.
- Ensure sufficient color contrast. Not everyone has perfect eyes or high quality displays. Either can make it difficult to tell where low-contrast content starts and stops. https://leaverou.github.io/contrast-ratio/
- Ensure the page is usable without color. There are many kinds of color deficiency. Some like red-green color blindness are common. Others can be quite rate. The best way to make sure everyone gets the same information is to encode information in both shape and color. For example, if you're making a dashboard for a test runner do not just have a green circle for passed and a red circle for failed: have a green check mark for passed and a red X for failed.