Could some one please help with differences between those two screen readers? As I was faced with one issue while testing the accessibility using them. Of course, I fixed the issue with screen reader only (Bootstrap's class to span element to read the sort order).
There are a lot of ways to answer this question. It partly depends on version and with which web browser the screen reader is paired. In short, that matrix can make it pretty complex to identify all the differences.
For example, CSS is handled differently by different screen readers: http://webaim.org/blog/screen-readers-and-css/
Or take a look at the HTML / ARIA / WCAG tracking PowerMapper does: https://www.powermapper.com/tests/screen-readers/
Perhaps most relevant to most users is that NVDA is free and JAWS is not.
If there is a specific issue you are trying to address, then you should just ask that question instead.
Related
I am trying to make my site responsive and was originally planning on using #media screen property in CSS, in order to optimise it for mobile devices.
I'm already using bootstrap but want to modify parts of it (which I have been doing using #media screen) for mobile devices. However, I've been told that this is unprofessional and that I should avoid using this. Is this true?
Thanks
It's hard to fathom why someone would tell you that using #media screen is unprofessional. That's how media queries work for, ya know, screens.
No, there is absolutely no reason to think that using media queries for screen, print, or speech is unprofessional in any way. It's a necessary tool in your web dev toolkit and you should feel free to use it as intended for your responsive websites.
See here for Mozilla's documentation for using media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
UPDATE
Based on the update to your question (where you added that you are using Bootstrap), I would tend to agree with #aaron-mcguire's answer below.
As he alluded to, it's impossible to discern exactly the context in which your friend/colleague/person told you it would be unprofessional to use #media screen. But if you're using Bootstrap, it probably makes sense to customize Bootstrap's built-in grid system in order to best meet your layout needs.
It's a very wide question, the answer to the whole question would be no - it's not unprofessional to use media queries, they are a fundamental part of the responsive development process. Where the question becomes a little jaded is when you mention you are using bootstrap.
As others have mentioned Bootstrap also uses media queries: https://getbootstrap.com/docs/4.3/layout/overview/
Since we have no context or design to go off it's hard to assume whether or not you would be fine using the preexisting media queries built into Bootstrap or if you would need to define your own.
Perhaps the person you were talking to has said it was unprofessional using custom media queries in place of bootstraps built in ones. Which again is hard for us to judge without seeing code/design. I would say unprofessional is the wrong choice of words - if you're trying to optimise your website on a mobile device then it's probably more a question of - is it the most efficient thing creating custom media queries in place of using the #include media-breakpoint-up(sm) { ... } one.
But again take my answer with a pinch of salt because there is no real context to the question. Web development is a constant learning process there is always somebody who is going to tell you that something you are doing isn't the correct way.
In foundation please explain it with any good example. I couldn't understand the difference from zurb-foundation documentation.
1) hidden-for-* vs hide-for-*.
2) visible-for-* vs show-for-*.
It gave a pretty good explanation, I think, with this quote:
Adding display: none to an element will prevent screen readers from
reading it. However, there are techniques to hide content while still
making it readable by screen readers.
If I wanted to show/hide a piece of content specifically for screen readers, I would use hide-for-* and show-for-*.
hidden-for-* and visible-for-* Are for regular uses. Hiding and showing content based on screen size for all users. For example, changing the size of a header.
hide-for-* and show-for-* Are for accessibility uses. Hiding and showing content based on screen-size specifically for screen-readers. For example, changing the size of clickable buttons or showing some meta information because it would be difficult to otherwise access that information from a screen-reader.
I am working on two different responsive websites (both work in progress and one is taken from lynda.com just for practice). This first one I did works fine as far as I can tell.
The HTML is HERE and CSS is HERE.
Then I started to work on this one, created the same css as above but the media query targeting #media only screen and (max-width: 768px) is not loading for some reason.
HTML is HERE and CSS is HERE.
I've spent hours trying to figure out why and I'm lost. I don't any differences between the two, yet one is working and one isn't. Any suggestions you have would be much appreciated!
I'm just testing them in a browser right now.
Thank You!
I think the issue is one site has a "meta...viewport..." in its HTML, while in the other site that statement is commented out.
In the site with no "meta...viewport..." the Media Queries are actually testing against the dimensions of the unconstrained "viewport" rather than the "screen" (an oversimplification is "devices sometimes lie"). On the other hand in the site with "meta...viewport...width=device-width" the "viewport" width is forced down to be the same as the "screen" width before the Media Queries test it, so you get different answers (especially on smaller devices).
(Depending on what devices you're targeting, you may need to dive down into thoroughly understanding a "viewport". There are good reasons for the way a "viewport" behaves; please don't misinterpret my sarcastic "devices sometimes lie" to mean "viewports are a bad idea".)
What's the best way to make an existing website fit for mobile devices(netbooks, mobile phones based on Android, Iphone, Blackberry etc.)?
Without going as far as implementing a mobile framework I would suggest taking advantave of CSS Media Queries which will allow you to serve up different css depending on the wdith of the browsing device.
A good start would be to look at the LessFramework which has taken all the hard work out the grid calculations.
Make it flexible.
You can detect different device widths with CSS media queries: https://www.w3.org/TR/css3-mediaqueries/#device-width
Less normative explanation: https://mislav.net/2010/04/targeted-css/
Great blog post: https://webdesignerwall.com/general/the-wall-is-redesigned
The CSS3 flexible box model can also be your best friend.
Twitter Bootstrap will also give you some nice out-of-the-box responsive functionality, meaning that the site's presentation will adjust based on the type of device and the size of its screen.
And I'd recommend checking out this book.
Current now many tools available, but how to keep good user experience is the most important.
This question already has answers here:
Closed 14 years ago.
Duplicate: Tables instead of DIVs and
Why not use tables for layout in HTML?
I am working on building a web app using ASP .NET MVC (needs to run on IE 7, FF 3.0), does it matter if I were to use tables rather than css for positioning and design?
As a developer I haven't had a chance to work with css.
Yes, it matters. The most convincing argument that I've used in favor of CSS over tables is that screen readers (for the visually impaired) trip over tabular layout. That's a good argument by itself, but it gets a whole lot better when you take into account the fact that Google reads your web site just like a screen reader would. If you want Google to have an easier time indexing your site, use CSS for layout. Tables are for tabular data.
Apart from all the "tables are evil" school of thought, you'll find it much easier to change the design in the future if you use pure css layout.
In addition, your mark up will a whole lot simpler and easier to "read".
Take a look at css. It shouldn't take more than a day to get up to speed.
Use tables when you really do want to show tabular data.
Otherwise you really ought to be using CSS for your layout.
The main reason is that CSS works better for "unusual" browsers like the following:
Mobile browsers/smart-phones
Search engines
Screen readers for the visually impaired
If you work for the US Government that last one is a legal requirement.
Also see these questions:
Tables instead of DIVs
Why not use tables for layout in HTML?
Yes if your application UI needs to be of high standards. No, if you are just learning to master some adhoc concept or coming up with a quick prototype. Benefits of CSS vs. Tables are well discussed. With CSS, a web site become more agile and accessible, have a look at CSSZen garden.
On a side note, HTML DOCTYPE declaration and validation are equally important. Lest you would spend time fixing styles for every browser