HTML
HyperText Markup Language (HTML)
is a language which acts as the skeleton to provide the
structure and content for a webpage.
Best practices
- Appropriate element type selection is very important for screen readers
- Comments: provide a brief explanation or label for the code
- Every image needs a clear and brief description for screen readers
- Decorative images should be hidden from screen readers
- Formatting: elements needs to be appropriately nested
- Headings: each section needs an appropriate heading
- Validate the code: check the code for errors using a HTML validator
Hints
- Classes: can be assigned to multiple elements and should have a simple and intuitive name based on either the element ("main-heading") or the style that will be applied ("bold")
- IDs: are only used once/for a single element and are used in navigation links
- Check that each start tag has a corresponding end tag
- Check folder pathway if the link isn't working
- “Alt” + “shift” + “F” automatically indents code and makes it easier to check for closing tags in VS Code
One & Done
- Section tags are used to group related content where other tags (nav/article) are not appropriate
- Avoid showing the first item in a droplist by creating an option with a blank value
- Using the correct file path is crucial
- A checkbox input allows for a binary response
- An aria-label attribute can be used to provide a descriptive text label to hyperlinks
- An aria-description can be used instead of an aria-label for a longer explanation
- "Read more" link accessibility needs to be considered in relation to screen readers