I'm working on a brand new project for a state government agency that we are going to be using Asp.Net MVC3 as our framework.
My question is I cannot find any guidance on how to make our web app Section 508 (and similar accessibly requirements). This is my first project where this is a requirment. So to implement this do I - For example -
Is MVC3 compliant out of the box just by adding some properties?
Extend the standard controls for this functionality?
Write my own controls?
Any suggestions would be appreciated. We don't really care about how this is implemented as long as it is clean in our Razor view.
Section 508 compliance doesn't have so much to do with the technology as it does the implementation of that technology. If you look at the guidelines, they're (for the most part) implementation details:
Having alt tags for images
Captioning audio presentations
Verifying that information is displayed with cues beyond just color
Documents readable without a stylesheet
Having row and column headers for your tables
Frames (if you're really still using them) must be titled and labelled
Don't add any content that flashes or flickers
When using javascript have descriptive information that identifiers to the user what is happening
The rules go on a bit more, but you get the gist of it. It's not in the technology, it's in the implementation details. You can do all of these things with standard HTML (captioning videos may be a bit trickier)
One other thing I can recommend: The Web Developer toolbar for Firefox (and I'm guessing the Chrome version as well) has a 508 validator option built right in. It will get your up and running on what the reqs really are.
Web accessibility is too broad a subject to cover in a single answer, but it is all to do with your HTML markup - regardless fo controls, or anything else you use. What really matters is the HTML rendered - even if you use some components to assist with this.
You can find a lot more information by searching for "web accessibility" in your favorite search engine, but my high level suggestions would be:
Be proud of your markup, and make it semantic. Use headings only when you actually intend there to be a heading. Within a table, use instead of if the cell is a table header. Use bulleted/numbered lists when that's semantically what you want. Don't miss-use tags to fake appearance.
Then layer on CSS to provide any visual look that you want. Check out http://www.CSSZenGarden.com to see how this is possible.
Finally, add on your behavior using Javascript. Don't mix these three up - with Javascript you can add in event handlers in the jQuery $(document).ready() function; leaving your markup behavior-free.
If you wish to use lots of Javascript libraries and controls, then beware that this is likely to decrease your compliance unless you specifically look for accessible controls which promote progressive enhancement. For a government site, someone without Javascript should still get a good experience, and a blind screen reader user should be able to use your Javascript controls as most screen reader users still have Javascript on.
There are various good articles on choosing your color contrasts, avoiding rapidly changing content, spacing - too much to cover here :-)
No, you need to write your html to be follow the 508 requirements. MVC doesn't do anything special in that regard.
Related
I am just starting a project and the wireframes are ready. But looking at the wireframes it seems that the primary goal was to reduce the number of pages and to include maximum functionality in to a single page.
Taking an example of an organization, the top portion of the page will show the organization details, below that at the left we have an division structure as a tree view, clicking on a division will populate the employee list on the right as a table, and when you click on an employee it will populate the employee details below.
Current wireframe looks something like this:
End user is happy as they can see the entire functionality on a single page and doesn't need to navigate to another page.
But this design reminds me the screen of some old desktop application and I feel that this page is unnecessarily complex- I want to split this in to multiple pages (at least in to three). Also, I am using MVC 4 and splitting this in to multiple pages will definitely help me to reduce the complexities during implementation.
But before arriving at any conclusion and raising any concern, I would like to know what you guys think. Some articles related to User experience are also welcome.
Here's what I think.
Whether the design above is 'right' depends on the target audience and the type of work / business process they need to carry out. There may be a strong business argument for being able to see all the information (org details, divisions, employees and employee details) on one page. It is not unusual to see a lot of information displayed in a page with a lot of interactivity - users expectations have increased because of consumer sites such as Gmail.
The users might find it frustrating if it was broken out into different pages.
To put it another way, I don't think there is a valid technical justification for making the designer change the UI above to split it into different pages.
You would be able to build the UI above in MVC as a single page web application. You will probably need to implement a lot of controller actions to support ajax calls. You're almost certainly going to end up using a lot of JQuery and you are probably also going to end up with a significant amount of JavaScript to write. Also, you'll need to make sure the designer has made good decisions around the sizing of the page. Is it going to be fixed width or dynamic for instance? You'll need to emit well structured HTML in order to achieve that solely using CSS (which I would strongly advise you do).
I have a CMS website written in aspx 2.0 that allows users to build up pages by dropping controls on a page and setting properties (reflection on the server side) and events (client side js). The render engine knows what property to call on each control to find out what to save into the database. I went through all the pitfalls of control re-hydration and lack of proper ids on the controls and really struggled to make the solution SEO friendly which currently is partial at best. Also suffer from viewstate getting huge so I have started to look at MVC as a better way forwards for the next version. The final design of the page is only set when the user decides to promote it live, and may make many changes per day.
A typical page may have many textbox controls, radio button groups, checkbox groups, dropdownlists and images. Also we have a few of our own controls that we reflect at runtime into the solution.
From my initial research into MVC, this looks to have been written to avoid these types of issues and not try to hide the html which looks very promising as well as giving final markup that is much more cross browser friendly.
Now the question - since the requirements are to generate dynamic pages with dynamic html controls, is this a step too far for MVC and I should stick with ASPX, or is there a way to generate the dynamic content which would be suitable for a non technical person to be able to do?
Really appreciate any guidance before I jump in with both feet :)
Thanks
Mark
I'm assuming by aspx 2.0 you mean WebForms? It's really not a question of if MVC is capable of doing what you need - it is capable, and in
my opinion it's more capable. However There are some major differences between WebForms and MVC check out this post for more on that topic: MVC versus WebForms.
I hope this helps. Without more information on exactly what you're trying to accomplish, there's not much more I can say. Consider asking more specific questions with some code examples.
Some of the main advantages of MVC: Clean HTML, No ViewState written on the page, easier to support html5 and thus SEO as well.
For me, since I used MVC 3 years ago I don't even want to touch WebForms thesedays.
Btw, if you want CMS + MVC, why not use Orchard rather than building yourself?
http://paulmason.biz/?p=118
Is it practical to use the jQuery UI Autocomplete as a base for a control that is functionally equivalent (in terms of the search functionality, results returned, etc...) but that displays the results in a fundamentally different way. I suspect the details of what sort of display don't really matter here, not a single column vertical list at any rate, but I can edit if people think that those details matter. The main issue is, is it reasonably easy to override the display mechanism without altering the jQuery UI source?
Thanks,
Matthew
#Matthew, while I am not sure how much it applies to what you are trying to do, as I do not know your end game, angularjs and angularUI are both pretty useful for doing filtering on data based off a text field. You can organize it in pretty much any fashion you want and tie it to a variety of data sources.
I've used it in place of auto complete on product listing pages to help filter down without page re-loads.
I'm building a new front end for an existing forum project, and I'm undecided on the best route to take for the user front end. The project will be built in ASP.Net 3.5.
The requirements are as follows:
1) User selectable themes/templates must be supported - I have forum goers who will want to contribute forum themes, so the layout system must be flexible.
2) Mobile friendly. The site must be usable from the most popular mobile browsers, so I have to be able to substitute templates based on the user agent and/or site url.
As near as I can tell, these are my best options:
1) XSLT: Output all of the relevant data in XML format, and dynamically attach an XSL stylesheet based on user settings/mobile state. I'm unsure how well mobile browsers support XSLT, but it appears that at least some do.
2) MVC: Sub in a different view based on user settings/mobile state. This might be harder to support templates from users, however.
3) Pure CSS: Standard DIV+CSS style layouts, subbing the CSS stylesheet in based on user settings/mobile state.
I'm quite sure that all of these options will work, however, I have only a basic familiarity with MVC, having developed exclusively in WebForms until now.
I'd love some guidance here, before I end up down the wrong path.
I would go for pure CSS layouts. It is increasingly being supported by more and more browsers.
I can't comment on MVC - no experience with that.
XSLT is something I like a lot. I don't know about mobile browsers, but it certainly is well supported by major desktop browsers (by supported I mean XSLT 1.0 is well supported). The downer is that there seem to be relatively few people with skills - much less so than CSS. So if your goal is to get reasonable abount of user contributed themes, I think that would be much better achieved with CSS.
What is the best and cleanest way to implement A-B testing in asp.net mvc? That is, when we make new changes to an asp.net mvc web site, we want to test the new html/css/js with a certain subset of visitors (defined on cookie, login id, etc) and then analyze some metrics (page response time, number of pages visited, $$$ in sales, etc) afterwards to measure the level of success of the changes.
I am looking for a clean way to implement a way of choosing what view (html/css/js, etc...) to render using asp.net mvc.
Check out FairlyCertain (http://www.fairtutor.com/fairlycertain/) when you get a chance. It's a .NET A/B library that you can pretty much just drop into your project and start writing tests.
Unlike the Javascript libraries from Google and VisualWebsiteOptimizer, everything happens on the server so you don't suffer any performance, user experience or SEO issues. I've been using it in my stuff for a while now and it works quite well.
There is an A/B testing framework specifically for ASP.NET MVC. This is an open source software I wrote myself when, just like you, didn't find a free tool which works nicely with ASP.NET MVC and doesn't require much setup.
Google Content Experiments? It's a Javascript-based solution that doesn't require anything from your backend.
You include Google's Javascript on your page
The script randomly substitutes elements on your page as defined by your A/B test
Google's site shows you a nice breakdown of the results...
If you are using the spark view engine, you could probably do it with a variation of the theme filter (http://sparkviewengine.com/documentation/viewlocations#Extendingfilepatternswithdescriptorfilters). For each new visitor to the site, determine if you want them to see the existing or new version of the site and set a cookie. Wire up a descriptor filter that looks for the presence of the cookie and modify the view location to look in the folder containing the modified views. If an alternative view exists, the Spark engine will automatically render it in place of the "normal" view, otherwise it will render the normal view.
If you are using the normal WFVE, then the simplest way to manage this would be to define a folder under Views where your view alternatives live. When you want to provide an alternative view, you place it in a location that matches its position within the normal Views folder but rooted at the alternatives folder e.g. to provide an alternative to Views/Users/login.aspx place your new view at Views/Alternative/Users/login.aspx.
With a convention in place for locating your alternative views, you can extend the WebFormViewEngine and overload CreatePartialView / CreateView to inspect some aspect of the ControllerContext to determine whether to render the default or overloaded view and alter the path as appropriate e.g. changing .../Views/Users/login.aspx to .../Views/Alternative/Users/login.aspx.
I suggest you use Display Modes to achieve A/B testing.
But Display Modes just support simple problems by default.
If you already implement Display Modes in some other scenario. You can consider DisplayModeMatrix (just google it). It helps you use Display Modes more efficiency.
https://www.nuget.org/packages/DisplayModeMatrix/
Wth Display Modes you can simply delete/rename views after A/B testing to clean up your project.
I think there isn't a ready to use solution for this and you will have to improvise.
Try to override your current functionality in well defined points without breaking it. Explicitly draw a border where your regular code and A-B testing code lives.
Inversion of control principle might help a lot here too (i.e. - controller factory could provide derived controller instead of original one). For views&partialviews - you could change viewengine so it would try to look for 'MyPartialViewAB.ascx' instead of 'MyPartialView.ascx'.
And it might be a good idea to take a look what performance counters are (in case you haven't).