Popular Post Scatheon Posted March 24, 2021 Popular Post Share Posted March 24, 2021 (edited) Most of us are people who are able to see and interact with websites visually. When we look at the Edit Nation page, for example, we are able to see that the form inputs have their respective labels to the left of them, so we are fairly able to see what the purpose of each input is. People using assistive technology like screen readers, however, depend on the labels for form inputs being set programmatically, as without visuals, they aren't able to make that kind of connection themselves. Just today we had a user in the Discord help channel asking for help as he wasn't able to find the Custom Description input as was directed to him by one of the game objectives. There's a fairly low-effort way to improve the accessibility here. The most basic way to do this would be to wrap each input label with the <label> tag, using a for attribute that points to the id attribute of its respective input. For example, using the Nation Title input, we'd use code like this: <label for="nation-title">Nation Title:</label> <input id="nation-title" type="text" name="nattitle" value="Blast!" placeholder="The Kingdom of" style="width:100%;"> Notice how the values for the for and id attributes are identical. That's how the browser is able to report to assistive technology that the label is associated with the input. Now, there's plenty more that can be done to improve accessibility site-wide, but I just wanted to make a post about a quick win that could help users who depend on screen readers to interact with the web. One bonus with this, is that browsers automatically focus the input when the user clicks the label, so everybody wins with this kind of improvement. Edited March 24, 2021 by Blast 7 1 Quote Yes hello I am a politic and war Link to comment Share on other sites More sharing options...
Administrators Alex Posted March 25, 2021 Administrators Share Posted March 25, 2021 Thank you, that is a great idea. I will get started working on this. 3 Quote Is there a bug? Report It | Not understanding game mechanics? Ask About It | Got a good idea? Suggest ItForums Rules | Game Link Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.