• A <button> tag does not need anything special to work. Use <button> when you can, but it is possible to use other elements as long as you add role="button" and add JavaScript to replicate the button functionality.
• Just like links, you can add class="visuallyhidden" with descriptive text to give more context to the button's purpose.
• If a button contains an <img> element, make sure to set its alt attribute. If it contains an icon, use aria-label to describe the icon instead.
• You can use <input type="image"> to make a graphical button. It takes a src and alt attribute just like traditional images.
• Button states are important, not just button styling! If you are only toggling classes to visually manage state of your components, you are likely not appropriately conveying that state to users of assistive technologies.

• Avoid using color only to communicate information. In the case of links, use another identifier such as bold or underline to indicate a link verses using color alone.
• Some users have difficulty reading text if there is too little contrast between foreground and background. To meet Level AA, text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).

• Do not set your site's link focus to outline: none. Never. Ever.
• If you have multiple form fields on your site or you see the dreaded outline: none in your base code, you can reset the browser defaults by adding the code:

 a:focus {
   outline: auto 2px Highlight; // for non-webkit browsers
   outline: auto 5px -webkit-focus-ring-color; // for webkit browsers
 }

• Of course you can create your own focus styles to match your theme or to make the default browser styles more prominent, just make sure they are visible by tabbing and obvious to your users.

• Add id selectors to titles or paragraphs and use aria-labelledby="" to link to the title text (Example #1).
• Add descriptive text with aria-label="" directly in the link (Example #2).
• Use the class visuallyhidden to visually hide more information about the link (Example #3). Note that VoiceOver can cause unintended reading order of visually hidden content in interactive elements.
• Turn read more links into buttons, when you can, since they allow for more labeling options.

• Provide ways for users to skip to important sections of your website. This will help users using screenreaders navigate your site easier and more efficiently.
• There is no real theming rule when it comes to styling your skip links, as such a lot of websites tend to hide them with class="visuallyhidden" with a special focus attribute so that sighted keyboard only users are able to see them.
• It is important to see that the link points to a valid HTML ID, as often this is overlooked in implementation.
• In this site we have used 'Jump to main content', but other valid examples of "skip" links include:

Skip to content
Skip to main content
Skip to search
Skip to bottom navigation
Skip to main menu

• Avoid small font sizes.
• Use relative units for font size, such as ems or rems. While modern browsers can smoothly zoom pixel-based layouts, sizing type in relative units ensures an entire layout can be scaled up or down by simply updating the font-size of the body element.
• A design should allow typography to be magnified up to 200% by the user without clipping or distorting content.
• Select basic, simple, easily-readable fonts and use a limited number of fonts.
• Avoid small font sizes and use relative units for font size (ems or rems).
• Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS (caps are similar to screaming to screenreaders).
• Don't rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
• Avoid blinking or moving text.
• Use real text rather than text within graphics.