TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Achieving Accessibility Through Simplicity

121 点作者 freddyym大约 5 年前

10 条评论

Nicksil大约 5 年前
This article hit on a number of issues I have with today&#x27;s Web development.<p>The Biggie:<p>&gt;Remember that the browser is the user agent, not the developer agent.<p>Others I find significant:<p>&gt;“trust the web browser”.<p>&gt;Don’t mess about with the scroll wheel<p>&gt;don’t override default behaviors on the right click and text selection.<p>&gt;Don’t use JavaScript to create custom input elements like text boxes, combo boxes, or scrollbars.<p>&gt;Try not to use a purely visual representation of information, such as an icon: these should always be paired with text.<p>&gt;Also avoid moving information around — animations and visually complex state transitions.<p>&gt;When adding images, always include an “alt” tag with a plain-English description of the image.<p>When using correct document structure and semantics, it can be amazing what you get for &quot;free&quot; with respect to usability.<p>Additional issues I deal with on a daily basis which exist because some folks weren&#x27;t satisfied with the default, correct behavior:<p>- A div with a &quot;click&quot; event is not a button or link<p>- A div with nested span elements is not a select<p>- The ad hoc &quot;click&quot; event handling does not handle auxiliary&#x2F;middle click behavior<p>- An icon, with no accompanying text, also has no title attribute or anything else to convey its purpose to the user<p>- The ad hoc navigation implementation does not recall scroll position<p>- The ad hoc navigation implementation does not allow me to &quot;back&quot; out of the website<p>- The scroll event handler, called tens&#x2F;hundreds of times per second, so that it can update the sticky &quot;progress&quot; bar that someone thought was necessary to inform me how far along the article I&#x27;ve come, increases my energy bill and the ambient temperature inside my home<p>Sometimes I just want to grab these folks by the collar and yell &quot;Stop touching it!&quot;
评论 #23325158 未加载
评论 #23325675 未加载
评论 #23325131 未加载
评论 #23327553 未加载
zomglings大约 5 年前
One thing stood out to me, from reading the post and the HN discussion. I think there&#x27;s a real distinction to be made between web pages and web applications. HN seems to have a bias against web applications which is probably unfair.<p>Most web developers today do not set out to build web pages. They start with full-on experiences they would like to bring to users, and the web stack is their tool of choice in doing so. There is nothing wrong with this! And different considerations apply in the development of such applications versus a web page.<p>Philosophically, SourceHut is about non-browser-based workflows (e.g. using email for merge requests). Since SourceHut users do far less of their SourceHut-related work on the actual website, SourceHut can afford to take a web page approach. GitHub, in contrast, focuses on browser-based workflows. They actually do a pretty great job at it - and this is something that they can do only because they take a web application approach. I like their keyboard shortcuts, for example, but these would be difficult (impossible?) to implement on a simple HTML page.<p>No single user can say that one approach is right and the other is wrong. All they can do is assert preferences. At the end of the day, traffic does the talking.<p>But thinking in terms of web pages vs. web applications makes things like this:<p>&gt; Many companies have written checks with an uncomfortable number of zeroes on them to get the job done.<p>more understandable.
评论 #23329748 未加载
评论 #23329780 未加载
mwcampbell大约 5 年前
&gt; The user is already comfortable with the way their browser works, and you will fail to capture the subtle nuances of their user agent with your pretty imitations.<p>Amen! One form of browser imitation that particularly annoys me is client-side page loading. This is where JavaScript code intercepts activation of links, loads the new page using XHR or the like, then updates the current DOM in-place. Yes, this gives web developers the opportunity to prefetch pages or do fancy animations. But the accessibility problem here is that there&#x27;s no way for an implementation of this technique to signal to a screen reader that a page loaded just as if the browser itself had loaded the page. Yes, you can use an ARIA live region to make a screen reader read your own message when you&#x27;ve finished loading the page. But I want my screen reader to be in control of what it does when a new page loads, e.g. automatically reading the contents of the page, possibly in a user-configurable way. So I think it&#x27;s better to let the browser just load the page.
评论 #23325470 未加载
评论 #23328093 未加载
评论 #23332930 未加载
jakelazaroff大约 5 年前
I think we all recognize that the web today has become overcomplicated. That said, a lot of Drew&#x27;s advice here is dogmatic.<p><i>&gt; Leave the page at its default font size and avoid using custom fonts, preferring to use vague selections like “sans-serif” and “monospace”.</i><p>Why? These are all easily customizable by the user.<p><i>&gt; Try not to use a purely visual representation of information, such as an icon: these should always be paired with text.</i><p>There are plenty of near–universally recognizable icons. Do your OS&#x27;s windows say &quot;close&quot; in the title bar, or do they simply have an X?<p><i>&gt; Also avoid moving information around — animations and visually complex state transitions.</i><p>Animations can be overused, but they can also serve an important purpose: displaying the transition between states.<p>For example, when you scroll your mouse, does the window just snap to the next page? Or does it go bit by bit so you can see where the new information comes from, and where the old information goes? Which do you think is a better experience?
评论 #23327283 未加载
评论 #23326237 未加载
评论 #23326437 未加载
评论 #23326262 未加载
rdiddly大约 5 年前
Of course. Analogous to how your closet is a lot easier to keep organized when there&#x27;s <i>less crap in it.</i>
sansnomme大约 5 年前
Drew, if you are reading this, please add Gogs&#x2F;Gitea and OneDev to this list of benchmarks on the performance page. Otherwise it is somewhat disingenuous by comparing against Gitlab and GitHub since Rails and Ruby are hardly known for their speed when it comes to web apps. Compare against Go and the JVM if you want an honest comparison.<p><a href="https:&#x2F;&#x2F;forgeperf.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;forgeperf.org&#x2F;</a><p><a href="https:&#x2F;&#x2F;gogs.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;gogs.io&#x2F;</a><p><a href="https:&#x2F;&#x2F;gitea.io&#x2F;en-us&#x2F;" rel="nofollow">https:&#x2F;&#x2F;gitea.io&#x2F;en-us&#x2F;</a> (Gogs fork)<p><a href="https:&#x2F;&#x2F;onedev.io" rel="nofollow">https:&#x2F;&#x2F;onedev.io</a>
ChrisMarshallNY大约 5 年前
Simplicity is difficult.<p>I use a comparison that I call &quot;Nakamichi vs. Adcom.&quot;<p>Those of us...of a &quot;certain age&quot;...will remember these as top-shelf stereo brands. They used to cost a bundle.<p>Nakamichi amps tended to be...engineer-friendly: <a href="https:&#x2F;&#x2F;audio-database.com&#x2F;NAKAMICHI&#x2F;amp&#x2F;amplifier2.JPG" rel="nofollow">https:&#x2F;&#x2F;audio-database.com&#x2F;NAKAMICHI&#x2F;amp&#x2F;amplifier2.JPG</a><p>Adcom amps tended to be a bit simpler: <a href="https:&#x2F;&#x2F;www.hifiengine.com&#x2F;images&#x2F;model&#x2F;adcom_gfa-585_power_amplifier.jpg" rel="nofollow">https:&#x2F;&#x2F;www.hifiengine.com&#x2F;images&#x2F;model&#x2F;adcom_gfa-585_power_...</a><p>Both were pretty awesome, but they definitely &quot;spoke to&quot; different crowds.<p>I think that the debates over which is better would never be resolved.<p>I like to take the tack of &quot;Make it simple, but no simpler than absolutely necessary to get the principal task done.&quot;<p>This is really important in both usability and accessibility.<p>There&#x27;s a famous quote from Josef Albers: <i>&quot;In design, sometimes one plus one equals three.&quot;</i><p>Every element that we add to a design; whether functional or ornamental, can have a combinatorial impact on complexity.
评论 #23327748 未加载
gnicholas大约 5 年前
&gt; <i>Also avoid putting text over a variable background, such as a gradient or tiled background.</i><p>For sure. And especially don&#x27;t have text over a background image that scrolls beneath it. Since the image isn&#x27;t likely uniform in color, you will end up creating color&#x2F;contrast problems.
chrismorgan大约 5 年前
&gt; <i>&lt;meta charset=&quot;utf-8&quot; &#x2F;&gt;</i><p>I’m curious: why do many people continue to use the trailing slash in many places? As far as HTML parsers are concerned, it’s <i>completely</i> useless. (On HTML tags, that is. It’s still significant on MathML and SVG tags.) Doesn’t seem to me that it will help authors to understand what’s going on, either—if anything, it muddies the waters so that people will think that you can close tags that way (you can’t).
brightball大约 5 年前
Accessibility is one of those things that isn&#x27;t taken seriously enough by many people. It&#x27;s good to see this on the front of HN.
评论 #23331839 未加载