In his explanation, it was stated that apart from using Lighthouse audit to check accessibility, it was also recommended to conduct the test manually. Still this audit has greatly helped web developers in improving website performance.
Why a button does need to have a name that can be accessed, because when the button is not given a name that can be accessed, the screen reader used by blind people and other assistive technologies only calls it as a button, which in no way informs visitors about what is to be done by the button.
The website fails a Lighthouse audit and raises a warning flag when the it has a button that contains no text or no aria-label property. In most cases, webmasters don't want to put words the button because it will visually damage the web design.
How to make a button have an accessible name
If possible, the easiest way is to put a description of what happened or where one will be taken to which page when a visitor clicks on the button. For example:<button>Home</button>
It will inform the visitor that they will be taken to the homepage when the button is clicked. The existence of such information will certainly help visitors navigate the blog.
For buttons that do not allow visually visible names, such as button icons, use aria-label attribute to give a clear picture to anyone who uses assistive technology to read it.
If you use Contempo Theme on Blogger, search for,
<a class='return_link' expr:href='data:blog.homepageUrl'>
<b:include data='{ button: true, iconClass: "back-button rtl-reversible-icon flat-icon-button ripple" }' name='backArrowIcon' />
</a>
replace entirely with,
<a class='return_link' href='/'>
<button class='svg-icon-24-button back-button rtl-reversible-icon flat-icon-button ripple' aria-label='Home button'>
<svg class='svg-icon-24'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_arrow_back_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</button>
</a>
Next look for,
<div class='navigation'>
<b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
</div>
replace entirely with,
<div class='navigation'>
<button class='svg-icon-24-button flat-icon-button ripple sidebar-back' aria-label='navigation'>
<svg class='svg-icon-24'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_arrow_back_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</button>
</div>
After making changes, audit the page again with Lighthouse to see a change to the score.
Label: Blog, Blogger, Lighthouse, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
