30 Tips for Beginning FrontEnd Programmers
Selectors that are or include html tags should be avoided.
If possible, write abbreviated property records (for example, instead of padding-left, padding-top, etc., write values in padding).
Do not specify units for zero values (for example, instead of margin: 0px, you need to write margin: 0).
Do not put 0 in the integer part in values between -1 and 1 (i.e. instead of, for example, 0.5em, write .5em).
Don’t use quotes in links.
Sort declarations in CSS alphabetically.
try to use BEM for CSS.
Make video elements accessible for people with disabilities.
There is an attribute to focus on certain elements tabindex. It is useful when you need to provide accessibility for keyboard-only users.
For Magnifier users, there are 3 rules for content that appears on hover:
Content can be dismissed without moving the focus or cursor (for example, using Esc).
The cursor can be moved from the button to the content that appears without it disappearing.
Appearing additional content remains visible until the focus or cursor is removed from the button or additional content, or until the user dismisses the content with the Esc key.
The Aria-label attribute helps give the element a title that is only visible to screen readers. The Aria-labelledby attribute allows the screen reader to read a different visible title or title when the element is focused.
Aria-describedby allows you to provide additional information for the screen reader to the existing visible title.
Aria-disabled allows you to include an inactive element in the focus order. This means that this element will not exist for the user from the screen reader.
The “alertdialog” role allows assistive technologies and the browser to recognize a pop-up warning or error message and to sound it out in a special way, such as playing a system alert sound.
Focus can only be on interactive elements, i.e. buttons, links, checkboxes, etc. The focus order must match the visual or logical order of the interactive elements on the screen. Inactive controls do not have focus.
To see how an element should type itself when used with the keyboard, see the section ‘Design Patterns and Widgets’.
It is worth specifying the main language of each page, using, for example, the lang attribute in html lang=”en”. You need to use the lang attribute on certain elements when the element’s language is different from the rest of the page.
WAI-ARIA roles can give additional meaning to code, for example by using role=”search” to define search functionality.
You need to provide clear instructions, error messages, and notices to help users complete forms on your site.
It is worth making sure that the order of the elements in the code corresponds to the logical order of the information presented. One way to test this is to remove the CSS styling and make sure the content order makes sense.
Responsive website design should be used.
Use WAI-ARIA to provide information about the functionality and status of custom widgets such as accordions and custom buttons. For example, role=”navigation” and aria-expanded=”true” (aria-expanded is set on an element to indicate whether the control is expanded or collapsed, and whether controlled elements are shown or hidden).